<script setup>
import {defineProps} from "vue";
import ProgressBar from "./ProgressBar.vue";

const props = defineProps({
  hue: {
    type: Number,
    default: 0,
  },
  // 色度
  chroma: {
    type: Number,
    default: 0,
  },
  // 亮度
  luminance: {
    type: Number,
    default: 0,
  },
});
</script>

<template>
  <view class="container">
    <view class="title">面部色彩维度</view>
    <view class="title-en">COLOUR DIMENSIONS</view>
    <view>
      <view class="title">色相</view>
      <view class="text-en">HUE</view>
      <ProgressBar :step="Number(hue)"/>
      <view class="desc">
        <view class="flex">
          <view>冷色</view>
          <view>暖色</view>
        </view>
        <view class="flex flex-en">
          <view>Cool</view>
          <view>Warn</view>
        </view>
      </view>
    </view>
    <view>
      <view class="title">亮度</view>
      <view class="text-en">VALUE</view>
      <ProgressBar :step="Number(chroma)"/>
      <view class="desc">
        <view class="flex">
          <view>暗沉</view>
          <view>白皙</view>
        </view>
        <view class="flex flex-en">
          <view>Dark</view>
          <view>White</view>
        </view>
      </view>
    </view>
    <view>
      <view class="title">色度</view>
      <view class="text-en">CHROMA</view>
      <ProgressBar :step="Number(luminance)"/>
      <view class="desc">
        <view class="flex">
          <view>柔和</view>
          <view>鲜艳</view>
        </view>
        <view class="flex flex-en">
          <view>Soft</view>
          <view>Bright</view>
        </view>
      </view>
    </view>
    <!--    <ProgressBar :step="1" />-->
  </view>
</template>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}

.title {
  color: #031C24;
  text-align: center;
}

.title-en {
  margin-top: 4px;
  color: #D8D8D8;
  text-align: center;
}

.text-en {
  margin-top: 6px;
  color: #D8D8D8;
  text-align: center;
  font-size: 12px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.flex-en {
  font-size: 10px;
  color: #D8D8D8;
  margin-top: 6px;
}

.desc {
  margin-top: 4px;
}

</style>
